<template>
  <div class="databasem">
    <el-container class="content-container">
      <el-aside :width="dividerWidth + 'px'"><data-list-tree :nodekey="nodekey" ref="treeRef" :handleNodeClick="handleNodeClick"></data-list-tree></el-aside>
      <div class="divider" ref="dividerRef"></div>
      <el-main>
        <template v-if="urlTabs.length !== 0">
          <el-tabs v-model="urlTabsValue" type="card" @tab-click="handleClick" @tab-remove="removeTab" closable>
            <el-tab-pane v-for="item in urlTabs" :key="item.name" :name="item.name">
              <template #label>
                <span>
                  <icon-types :data="item" :nodekey="urlTabsValue" />
                  <span>{{ item.title }}</span>
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
          <div class="router-container">
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :key="route.fullPath" :is="Component" :data="tabData" />
              </keep-alive>
            </router-view>
          </div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted, ref, watch } from 'vue';
import useElementResize from './hooks/useElementResize.js';
import DataListTree from './components/dataListTree.vue';
import IconTypes from './components/iconTypes.vue';
import { ElContainer, ElAside, ElMain, ElTabs, ElTabPane } from 'element-plus';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';

export default {
  name: 'Root',
  setup() {
    const dividerRef = ref(null);
    const store = useStore();
    let dividerWidth = ref(300);
    let urlTabsValue = ref('');
    let urlTabs = ref([]);
    let tabData = ref({});
    const nodekey = ref('');
    let treeRef = ref(null);
    const router = useRouter();
    const route = useRoute();

    const handleClick = (tab) => {
      let data = urlTabs.value[tab.index];
      urlTabsValue.value = data.name;
      treeRef.value.treeRef.setCurrentKey(data.id);
      nodekey.value = data.id;
      urlSkipMap(data.node);

      // let node = treeRef.value.treeRef.getCurrentNode();
      // treeRef.value.treeRef.insertAfter(
      //   {
      //     id: 'test:newquery',
      //     name: '新建查询ffffff',
      //     type: 'newquery',
      //     leaf: true,
      //   },
      //   node
      // );
    };

    watch(urlTabsValue, (newValue) => {
      urlTabs.value.forEach((e) => {
        if (e.name === newValue) {
          tabData.value = e.node;
        }
      });
    });

    const urlSkipMap = (data, forceupdate) => {
      // console.log(data, 'ppppppp');
      if (data.type === 'connection') {
        //数据连接
        router.push({ name: 'Source', params: { serverid: data.connectionid, forceupdate } });
      } else if (data.type === 'newstorageGroup') {
        //新建存储组
        router.push({ name: 'NewStorage', params: { serverid: data.connectionid, forceupdate } });
      } else if (data.type === 'querylist') {
        //查询列表
      } else if (data.type === 'storageGroup') {
        //存储组
        router.push({ name: 'Storage', params: { serverid: data.connectionid, groupname: data.name, forceupdate } });
      } else if (data.type === 'newdevice') {
        //新建实体
      } else if (data.type === 'device') {
        //实体
      } else if (data.type === 'newquery') {
        //新建查询
      } else if (data.type === 'query') {
        //查询
      }
    };

    const handleNodeClick = (data) => {
      nodekey.value = data.id;
      if (data.type === 'querylist') {
        return;
      }
      urlTabsValue.value = data.id + '';
      let list = urlTabs.value;
      if (
        !list.some((e) => {
          return e.id === data.id + '';
        })
      ) {
        list.push({ node: data, title: data.name, name: data.id + '', id: data.id + '', type: data.type });
        urlTabs.value = list;
        urlSkipMap(data, true);
      } else {
        urlSkipMap(data);
      }
    };

    const removeTab = (targetName) => {
      let tabs = urlTabs.value;
      let activeName = urlTabsValue.value;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              urlSkipMap(nextTab.node);
              activeName = nextTab.name;
              nodekey.value = nextTab.id;
              treeRef.value.treeRef.setCurrentKey(activeName);
            } else {
              nodekey.value = null;
              treeRef.value.treeRef.setCurrentKey(null);
            }
          }
        });
      }
      urlTabsValue.value = activeName;
      urlTabs.value = tabs.filter((tab) => tab.name !== targetName);
    };

    onMounted(() => {
      useElementResize(dividerRef, dividerWidth);
    });

    return {
      store,
      route,
      tabData,
      urlTabsValue,
      dividerRef,
      nodekey,
      dividerWidth,
      urlTabs,
      treeRef,
      handleClick,
      removeTab,
      handleNodeClick,
    };
  },
  components: {
    ElContainer,
    ElAside,
    ElMain,
    DataListTree,
    ElTabs,
    ElTabPane,
    IconTypes,
  },
};
</script>

<style scoped lang="scss">
.databasem {
  height: 100%;
  .divider {
    width: 1px;
    height: 100%;
    background-color: #f0f0f0;
    cursor: w-resize;
    &:hover {
      background-color: $theme-color !important;
      width: 2px;
    }
  }
  .router-container {
    height: calc(100% - 42px);
    width: 100%;
    overflow: auto;
  }
  &::v-deep .content-container {
    height: 100%;
    .el-aside {
      height: 100%;
    }
    .el-main {
      padding: 0;
      height: 100%;
      .el-tabs__header {
        margin: 0;
        .el-tabs__nav {
          border: 0;
          .el-tabs__item {
            padding: 10px 15px;
            box-sizing: content-box;
            border-width: 0;
            line-height: 22px;
            height: 22px;
            position: relative;
            &.is-active {
              background: rgba(69, 117, 246, 0.04);
              color: $theme-color;
            }
          }
        }
      }
    }
  }
}
</style>
